<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" id="upload" />

    <script>
      document.getElementById('upload').addEventListener('change', (e) => {
        e.preventDefault();
        // multiple 多张， 取第一张
        // console.log(e.target.files);
        const originFile = e.target.files[0];
        const fileName = originFile.name.split('.')[0];

        let currentSize = 0;
        const perSize = 0.5 * 1024 * 1024; // 0.5MB
        const fileChunkList = []; // 存放文件所有切片的数组
        while (currentSize < originFile.size) {
          // File 继承自 Blob对象，有slice方法。
          // 什么是Blob? https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
          fileChunkList.push({ file: originFile.slice(currentSize, currentSize + perSize) });
          currentSize += perSize;
        }
        // console.log(fileChunkList);

        // 2. 将数组里面的blob对象，转换为Promise.allSettled([请求数组]) 所需要的请求组成的数组
        // 2.1 先拼接请求所需的参数
        const requestChunkList = fileChunkList.map(({ file }, index) => {
          const formData = new FormData();
          formData.append('chunk', file);
          // 我们使用文件名 + 切片下标作为切片 hash。如果文件名发送改变，就失去了效果，一般是如果文件内容不变，hash就不应该变化，工作里面一般采用spark-md5这个库，这里图方便，就用文件名+索引
          formData.append('fileName', `${fileName}-${index}`);
          return formData;
        });
        console.log(requestChunkList);
      });
    </script>
  </body>
</html>
